@keyframes turnX {
    0% {
        -webkit-transform: rotateY(0deg);
    }

    25% {
        -webkit-transform: rotateY(90deg);
    }

    50% {
        -webkit-transform: rotateY(180deg);
    }

    75% {
        -webkit-transform: rotateY(270deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
    }
}

@keyframes turn-reverse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(-90deg);
    }

    50% {
        -webkit-transform: rotate(-180deg);
    }

    75% {
        -webkit-transform: rotate(-270deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

.custom-circle {
    transform-origin: unset !important;
    transform: perspective(2000px);
    transform-style: preserve-3d;
    flex: 0 0 auto;
    width: 850px;
    height: 850px;
    z-index: -1;
    position: absolute;
    bottom: -270px;
    left: calc(50% - 415px);

    >.animation {
        transform: rotateX(75deg);
        height: 100%;
    }

    .circle {
        animation: turn-reverse 16s linear infinite;
        position: absolute;
        left: 0;
        top: 0;
    }
}

.shot {
    width: 1088px;
    height: 800px;
    position: absolute;
    left: calc(50% - 544px);
    bottom: 20px;
}

.circle-static {
    width: 588px;
    height: 266px;
    z-index: -1;
    position: absolute;
    left: calc(50% - 294px);
    bottom: -20px;
}

.little-circle {
    background-size: 100% 100%;
    width: 720px;
    height: 210px;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 360px);
    transform: rotateX(90deg);
    animation: turnX 16s linear infinite;
}